<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!doctype html>
<html class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>我的积分</title>
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="renderer" content="webkit">
<meta http-equiv="Cache-Control" content="no-siteapp" />
<meta name="format-detection" content="telephone=no" />
<jsp:include page="/jsp/inc_head.jsp"></jsp:include>
<style>
</style>
</head>

<body style="padding-bottom:50px;">
<input type="hidden" id="tab">
<div class="am-g">
	<div class="am-u-sm-12 am-pad-none hyjf_top">
    	<div class="am-u-sm-8">
    	<span class="hydj_jyz">我的积分</span>
        <span class="hyjf_num" id="my_integral"></span>
        </div>
        <div class="am-u-sm-4 am-text-center">
        	<a href="javascript:" class="dj_rule">积分规则</a>
        </div>
    </div>
</div>
<div class="am-g">
	<ul class="am-u-sm-12 am-pad-none hydj_midbg">
    	<li class="am-u-sm-4 am-pad-none am-text-center hydj_lei" onClick="query();">
        	全部
        </li>
    	<li class="am-u-sm-4 am-pad-none am-text-center hydj_lei add_opacity" onClick="query(1);">
        	获取
        </li>
    	<li class="am-u-sm-4 am-pad-none am-text-center hydj_lei add_opacity" style="border-right:0;" onClick="query(0);">
        	消耗
        </li>
    </ul>
    <!-- <div class="am-u-sm-12 am-pad-none">
    	<div class="am-u-sm-12 hydj_jygetlie">
        	<div class="am-u-sm-5 am-pad-none">
            	<div class="hy_jynum">经验&nbsp;200</div>
            </div>
            <div class="am-u-sm-7 am-pad-none am-text-right">
            	<div>+200.0</div>
            	<div class="hy_jyget">2016-04-05 09:36</div>
            </div>
        </div> -->
        <div id="loop"></div>
    	<!-- <div class="am-u-sm-12 hydj_jygetlie">
        	<div class="am-u-sm-5 am-pad-none">
            	<div class="hy_jynum">经验&nbsp;399</div>
            </div>
            <div class="am-u-sm-7 am-pad-none am-text-right">
            	<div>+399.0</div>
            	<div class="hy_jyget">2016-04-05 09:36</div>
            </div>
        </div> -->
    </div>
</div>


<script>
var ajaxpath="${pageContext.request.contextPath}";

$(function() {
	queryMyIntegral();
	query("");
});

function queryMyIntegral(){
	var url = ajaxpath+"/integral/queryMyIntegral.do";	
	$.get(url,function(data){
		$("#my_integral").html(data);
	});
}

function query(i){
	$("#tab").val(i);
	queryIntegralList();
}

function queryIntegralList(){
	var tab=$("#tab").val();
	ajax=true;
	page=1;
	var url = ajaxpath+"/integral/queryIntegralList.do?page="+page+"&tab="+tab;	
	$.get(url,function(integral_list){
		var html="";
		var i = 0;
		$.each(integral_list,function(){
			html+='<div class="am-u-sm-12 hydj_jygetlie">'+
		        	'<div class="am-u-sm-5 am-pad-none">'+
		            	'<div class="hy_jynum">经验&nbsp;'+integral_list[i].integral+'</div>'+
		            '</div>'+
		            '<div class="am-u-sm-7 am-pad-none am-text-right">';
		           if(integral_list[i].type==1){
		           		html+='<div>+'+integral_list[i].integral+'</div>';
		           }else if(integral_list[i].type==0){
		            	html+='<div>-'+integral_list[i].integral+'</div>';
		           }
		            	html+='<div class="hy_jyget">'+integral_list[i].createTime+'</div></div></div>';
			i++;
		});
		$("#loop").html(html);
	});
	/** 下拉时调用 再次加载 8 条商品*/
	$(window).scroll(function()
	{
		if (($(window).scrollTop() + $(window).height() >= $(document).height()- 50)
				&& ajax == true)
		{
			page++;
			ajax = false;
			ajaxIntegral(page);
		}
	});
	function ajaxIntegral(page)
	{
		var tab=$("#tab").val();
	    var url = ajaxpath+"/integral/queryIntegralList.do?page="+page+"&tab="+tab;	
		$.get(url, function(integral_list)
		{
		//console.log("查询商品结束："+new Date());
			var size = integral_list.length;
			if (size > 0)
			{
				for (var i = 0; i < size; i++)
				{
					appendIntegral(integral_list[i],i);
				}
				//console.log("加载商品商品结束："+new Date());
				ajax = true;
			}
		});
	}
	function appendIntegral(data,i){
		var html="";
		var j=page*8+i;
		html+='<div class="am-u-sm-12 hydj_jygetlie">'+
		        	'<div class="am-u-sm-5 am-pad-none">'+
		            	'<div class="hy_jynum">经验&nbsp;'+data.integral+'</div>'+
		            '</div>'+
		            '<div class="am-u-sm-7 am-pad-none am-text-right">';
		           if(data.type==1){
		           		html+='<div>+'+data.integral+'</div>';
		           }else if(data.type==0){
		            	html+='<div>-'+data.integral+'</div>';
		           }
		            	html+='<div class="hy_jyget">'+data.createTime+'</div></div></div>';
		$("#loop").append(html);
	}
}

$(".hydj_midbg > li").click(function(){
	$(".hydj_midbg > li").not(".add_opacity").addClass("add_opacity");
	$(this).removeClass("add_opacity");
})
</script>
</body>
</html>
